<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = 1280">
<title>Shop</title>
<meta property="og:title" content="$c_title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://star-fashion.dsentiment.com/shopping/shop/$brand/$url" />
<meta property="og:image" content="http://star-fashion.dsentiment.com/contents/product/$c_thumb" />
<meta property="og:site_name" content="http://star-fashion.dsentiment.com/" />
<meta property="fb:admins" content="754813612" />
<meta property="og:description" content="$facebook_description"/>
<link rel="stylesheet" href="/style.css" media="screen" />
<link rel="stylesheet" href="/css/shopping.css" media="screen" />
<link rel="stylesheet" href="/scripts/cloud-zoom.1.0.2/cloud-zoom.css" type="text/css" />
<link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.ui.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/scripts/jquery.carouFredSel-5.0.7.js"></script>
<script type="text/javascript" src="/scripts/cloud-zoom.1.0.2/cloud-zoom.1.0.2.min.js"></script>
<script type="text/javascript" src="/scripts/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="/scripts/cufon/PSL_Kittithada_Pro___700.font.js"></script>
<script type="text/javascript" src="/scripts/common.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
$(function(){
	 $('#product-list').carouFredSel({
			circular:false,
			auto:false,
			infinite:false,
			prev: '#prev',
			next:'#next',
			pagination: "#pager-list",
		});
	$('#gallery').carouFredSel({
		circular:false,
		auto:false,
		direction:"down",
		height:315,
		items:{
			'height':70 
		},
		infinite:false,
			prev: '#slide-up',
			next:'#slide-down'
	});
	$('.nav-expand a').toggle(function(){
		$(this).removeClass('active');
		$(this).parent().parent().animate({'right':'-107'}, {duration: 400,easing: 'easeInOutBack'});
	},function(){
		$(this).addClass('active');
		$(this).parent().parent().animate({'right':'0'},{duration: 400,easing: 'easeInOutBack'});
	});
	
	$('#gallery a').click(function(){
		var src = $(this).attr('href');
		$('#product .pic').find('a').attr({'href':src});
		$('#product .pic').find('img').hide().attr({'src':src}).fadeIn('fast');
		$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom( );
		return false;
	});
	
	$('#form-addtocar').submit(function(){
		$.post($(this).attr('action'),$('#form-addtocar').serialize(),function(data){
			if(data){
				alert(data);
			}else{
				alert('complate');
				var v = parseInt($('#car').find('span').text());
				$('#car span').text(v+1);
			}
			return false;
		});
		return false;
	});
 
	$('#form-search').submit(function(){
	if(($('#form-search #q').val() == '')||($('#form-search #q').val() == 'Search Keyword')){
		alert('Please Enter Keyword');
		return false;
	}		  
	});
	$('#form-search #search').bind('focusin', function() {
		if($(this).val()=='Search Keyword') $(this).val('');
	}).bind('focusout', function() {
		if($(this).val()=='') $(this).val('Search Keyword');
		return false;
	});
 	
 	$(".category-nav a.active").removeClass('active');
	var tid = "$tid" ? "$tid" : 1;
	$(".category-nav a:nth-child("+tid+")").addClass('active');
	 
	$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom({position :'inside'});
	$('#more').fancybox();
	$('.banner-logo').hover(function(){
		$(this).find('span').stop().animate({'top':'30px','opacity':1},200);
	},function(){
		$(this).find('span').stop().animate({'top':'20px','opacity':0},200);
	});
	 
	 
	$('#color').change(function(){
		var val = $(this).val();
		 $.post('size',{'color_id':val},function(data){
			$('#size').html(data);
		});
		return false;
	})
});
</script>
<style type="text/css">
.content-2 {
	padding-bottom:0;
}
.container {
	height:640px;
	margin-bottom:0;
}
.mousetrap {
	width:560px !important;
}
.cloud-zoom-big {
	width:560px !important;
}
#wrap {
	z-index:1 !important;
}
div#wrap-footer {
	position: relative;
}
div.shadow-l, div.shadow-r {
	height: 100%;
}
div.shop-brand {
	height: 555px;
	position: absolute;
	right: -55px;
	top: 0;
	overflow: hidden;
	width: 150px;
}
p.banner-logo {
	position: relative;
}
p.banner-logo span {
	position: absolute;
	left: 0;
	top: 35px;
	
	text-align: center;
	
	font-size: 11px;
    left: 0;
    position: absolute;
    top: 20px;
	width: 105px;
	opacity:0;
}
p.banner-logo span a {
	color: #666666;
}
.shop-content h1 {
	font-size: 26px;
	width: 410px;
}
.shop-content {
	padding-top: 20px;
}

</style>
</head>
<body id="shopping">
<!--$header_html-->
<div id="wrap-container">
  <div class="content">
    <div class="shop-main">
      <div class="top">
        <div class="shop-left">
          <p class="banner-logo"><span><a href="#">brand info</a></span><img src="/thumb/105/30/zc/contents/brand/$c_brand_thumb" /></p>
          <div class="gallery-list">
            <div class="gallery-box">
              <ul id="gallery">
                <!--SiXhEaD:gallery-->
                <li><a href="/contents/product/$g_image"><img src="/thumb/110/70/zc/contents/product/$g_image" /></a></li>
                <!--/SiXhEaD:gallery-->
              </ul>
              <br class="clear" />
            </div>
            <a href="#" id="slide-up">up</a> <a href="#" id="slide-down">down</a> </div>
        </div>
        <div class="shop-center">
          <div class="shop-head">
            <p class="category-nav"><a href="/shopping/$c_brand_url/?type=1" class="$tactive">MEN</a>|<a href="/shopping/$c_brand_url/?type=2">WOMAN</a>|<a href="/shopping/$c_brand_url/?type=3">KID</a></p>
            <div class="search-product">
              <form action="/shopping/search/" id="form-search" method="get">
                <input type="text" id="search" name="q" value="Search Keyword"  />
                <input type="submit" id="submit" value="go"  />
              </form>
            </div>
            <p id="car"><a class="cart" href="/shopping/cart-list/"></a><span>$cnt_order</span></p>
            <br class="clear" />
          </div>
          <div class="shop-content">
            <h1>$c_title</h1>
            <div id="facebook">
              <fb:like href="" send="true" layout="button_count" width="200" show_faces="true"></fb:like>
            </div>
            <div class="addtocart">
              <form action="/shopping/cart/$pcode" method="post" id="form-addtocar" class="form-addtocar" name="form-addtocar">
                <label for="color">COLOR</label>
                <select id="color" class="color" name="color">
                <option value=""></option>
                <!--$colorOptions-->
                </select>
                <label for="size">SIZE</label>
                <select id="size" class="size" name="size">
                  
                  <!--$sizeOptions-->
                </select>
                <input type="submit" class="submit" value="submit" />
              </form>
            </div>
            <div id="product" class="product">
              <div class="pic"><!--<img src="/thumb/560/300/zc/contents/product/$c_image" /> --> 
                
                <a href='/contents/product/$c_image' class ='cloud-zoom' id='zoom1' rel="adjustX: 1, adjustY:-4" style="width:560px;"><img src="/contents/product/$c_image"  alt='' align="inside" height="300"  style="max-width:560px;" /></a> </div>
              <p style="margin-top:5px;">Price : <span>$c_price</span></p>
              <a href="/shopping/detail/$c_url" id="more">more</a> </div>
          </div>
        </div>
        <br class="clear" />
        <div class="shop-brand">
          <div class="brand-list">
            <p class="nav-expand"> <a href="#" class="active"></a> </p>
            <ul class="brand">
              <!--SiXhEaD:brand-->
              <li><a href="/shopping/$brand_url/"><img src="/thumb/105/30/zc/contents/brand/$brand_thumb" /></a> </li>
              <!--/SiXhEaD:brand-->
            </ul>
            <br class="clear" />
          </div>
        </div>
      </div>
      <div class="bottom">
        <div id="product-list-box" >
          <ul id="product-list" class="product-list">
            <!--SiXhEaD:product-->
            <li><a href="/shopping/$p_brand_url/$p_url"><img src="/thumb/140/90/zc/contents/product/$p_thumb" /></a> <span>$p_title</span> </li>
            <!--/SiXhEaD:product-->
          </ul>
          <br class="clear" />
        </div>
        <div id="pager"> <a id="prev" class="prev" href="#">Prev</a> <a id="next" class="next" href="#">Next</a>
          <div id="pager-list"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<br class="clear" />
<!--$footer_html-->
</body>
</html>